<%@ page language="java" contentType="text/html; charset=UTF-8" session="true"
    pageEncoding="UTF-8"%>
	<%@ page import="jmysql.CArea"%>   	
   	<%! CArea c=new CArea(); %>
   	<script type="text/javascript" src="lib/dtable/jquery.dataTables.js"></script>
   	<script type="text/javascript" src="lib/jquery-impromptu.4.0.min.js"></script>
   	<script type="text/javascript">
   	var aData;
   	var TablaModificar;
 	
   	//almacena los datos temporales
   	var datos_temporales = {
   		  "m_idarea":"", 	
   		  "m_nomarea":"",
   		  "m_descripcion":"", 
   		  "m_ubicacion":"",
   		  "m_estado":""}; 
   	
   	//div_id recibe el nombre de lo datos
   	function DoTable(div_id,nombre_tabla,columnas,Data){
   		var campo_tabla;
   		$('#'+div_id).html( '<table cellpadding="0" cellspacing="0" border="1" class="display" id="'+nombre_tabla+'" width="100%"></table>' );
			campo_tabla=$('#'+nombre_tabla).dataTable( {
				"aaData": Data,
				"bJQueryUI": true,
				"iDisplayLength":10,
				"sSingle":true,
				"bAutoWidth": false,
				"oLanguage": {	
					"sSearch":"Buscar:",
					"sLengthMenu": "Mostrar _MENU_ registros por página",
					"sZeroRecords": "No se han encontrado elementos",
					"sInfo": "Mostrando registros: _START_ / _END_",
					"sInfoEmpty": "Mostrando 0 de 0 de 0 registros",
					"sInfoFiltered": "(Registros con el filtro aplicado: _MAX_)"
					,'oPaginate': {
					'sPrevious': 'página previa','sNext': '>','sPrevious':'<','sFirst':'primera','sLast':'ultima'}
				},	"aoColumns": columnas
				,sPaginationType: 'full_numbers'

			} );
		return campo_tabla;
   	}
   	   	
  	$(function() {
  		/*Envía el mensaje de error*/
   		function MensajeError(tip,campo,mensaje){
   			campo.addClass( "ui-state-error" );
   			$('.'+tip).addClass( "ui-state-highlight" );
   			$('.'+tip).html( mensaje );
   		}
  		
  		/*Variables útiles*/
  	   	var m_nomarea = $( "#m_nomarea" ),
  		m_descripcion= $( "#m_descripcion" ),
  		m_ubicacion= $( "#m_ubicacion" );
  		var allModificar= $([]).add(m_nomarea).add(m_descripcion).add(m_ubicacion);
  	  	var tipsModificar = $( ".tipsModificar" );

  	  	//Trae los datos en el servlet, se envía el tipo de consulta, lo que queremos
  		function CargarListaArea(){
   			$.ajax({
   				  url: "CConsultaArea",
   				  data:'tipo=ListaArea', 
   				  type: 'post',
   				  dataType: 'json',
   				  success: function(data){
   					  cargar_tabla(data);
				  }  
   				});
   		}
  		
  	  	//manda los nuevos datos
  	  	function UpdateArea(nuevos_datos){
  	  	$.ajax({
				  url: "CModificarArea",
				  data:nuevos_datos, 
				  type: 'post',
				  dataType: 'json',
				  success: function(data){
					  //todo se realizo con éxito
					  if(data.resultado=="10"){
					  	$("#form-modificar-area").dialog("close");
					  		DialogoInformacionDiv('area-div','Área actualizada','Se ha actualizado el área con éxito!');   	
					  		CargarListaArea();//para poder ver los cambios que se han realizado
					  	}else if(data.resultado=="20"||data.resultado=="30"){//repetido
					  		//mensaje de dato repetido
					  		MensajeError('tipsModificar',$("#"+data.campo),' '+data.mensaje);
					  	}
					  	else{
					  		//error cualquier
					  		MensajeError('tipsModificar',$("#"+data.campo),' '+data.mensaje);
					  	}
			  	}  
				});
  	  		
  	  	}
  	  	
  		function cargar_tabla(datos){
  	     	//ahora creamos la tabla
  	     	$('#modificar_area').attr("disabled", true);
  			TablaModificar=DoTable(
  					'dynamic',
  					'tabla1',
	  					[{"sTitle":"","sWidth": '4%'},
	  					 {"sTitle":"","sWidth": '4%'},
	  					 {"sTitle":"Código de área","sClass": "center","sWidth": '12%'},
	  					 {"sTitle": "Nombre de área","sClass": "center" },
	  					 {"sTitle": "Estado","sClass": "center" },
	  					 { "sTitle": "Descripción","sClass": "center" },
	  					 { "sTitle": "Ubicación","sClass": "center" }
	  					 ]
	  				,datos.aDataSet);
  	   	}

  		
  		
  		
  		
  		//para eliminar
  		$("#tabla1 tbody tr td:nth-child(2) button").live("click", function () {
  			/*Datos de la tabla*/
  			var nTr = $(this).parents('tr')[0];
			var aData = TablaModificar.fnGetData( nTr );
// 			style="color:red;"
			$('#preguntaEliminar').html('<h3 style=\"color:red;\">¿Desea eliminar esta área?: '+aData[3]+'</h3><h3 style=\"text-align:center;\">¡Esta operación no se puede deshacer!</h3>');
			$("#preguntaEliminar").attr('title','¿Desea eliminar?').dialog
  			({	position:'center'
  				,show:'fade'
  				,hide:'fade'
  				,width: 'auto'
  				,buttons:{
  					'Cancelar':function(){$(this).dialog('close');},
  					'Eliminar':function(){
  						$(this).dialog('close');
  						$.ajax({
  						  url: "CConsultaArea",
  						  data:'tipo=Eliminar&idarea='+aData[2], 
  						  type: 'post',
  						  dataType: 'json',
  						  success: function(data){
  							DialogoInformacionDiv('area-div','Elemento eliminado','Eliminación realizada con éxito');
  							CargarListaArea();
  						  }  
  						});
  						
  					}
  				}
  			});//centrar el formulario
  		});
  		
  		
  		$( "#dialog:ui-dialog" ).dialog( "destroy" );
  		
  		//evento boton deshabilitar
  		//columna especifica y obe  1-n
  		//evento boton editar solamente los datos 
  		$("#tabla1 tbody tr td:nth-child(1) button").live("click", function () {
  			
  			//limpiamos los valores del formulario
  			allModificar.removeClass( "ui-state-error" );
			tipsModificar.html('');
  			
			/*Datos de la tabla*/
  			var nTr = $(this).parents('tr')[0];
			var aData = TablaModificar.fnGetData( nTr );
 			
			/*var aPos = TablaModificar.fnGetPosition( this );
   		    var aData = TablaModificar.fnGetData( aPos[0] );*/
  		    
  		    /*Se guardan los temporales para utilizarlos a futuro*/
  		  	datos_temporales.m_idarea=aData[1+1];
  		  	datos_temporales.m_nomarea=aData[2+1];
  		  	datos_temporales.m_descripcion=aData[4+1];
  		  	datos_temporales.m_ubicacion=aData[5+1];
  		  	
  		  	/*Se cargan los datos originales*/
			$("#m_nomarea").val(aData[2+1]);
			$("#m_descripcion").val(aData[4+1]);
			$("#m_ubicacion").val(aData[5+1]);
			
			//Valores de stado
			if(aData[3+1]==='Activa')
			{	
				$("#m_activo").attr("checked", "checked");	
				datos_temporales.m_estado="1";	
			} 
			else
			{	
				$("#m_inactivo").attr("checked", "checked");
				datos_temporales.m_estado="0";
			}
			
			$("#form-modificar-area" ).dialog({position:'center'});//centrar el formulario
			$("#form-modificar-area" ).dialog("open");
	  	});
  		
  		
  		
  		
  		//si los contenidos son largos, deben de cargarse
  		//Botones	
		$("#p_b_lista_area").button().click(
			function(){
				CargarListaArea();					
		});

        $( "#estados" ).buttonset();
  	
	      
		//dialogo de modificación, es uno de lo más cansados
		$( "#form-modificar-area" ).dialog({
			autoOpen: false,
			height: 'auto',
			width: 'auto',
			modal: true,
			show: 'clips',
			hide: 'clips',
			closeOnEscape:true,
			buttons: {
				"Cancelar": function() {
					$( this ).dialog( "close" );
				},
				"Guardar": function() {
					//enviamos los datos para guardarlos
					//averiguamos el nuevo estado
					
					var new_estado;//indica el nuevo estado a configurar
					if($('#m_activo').is(':checked'))
						new_estado=1;
					else
						new_estado=0;
					/*Guardamos los cambios de estado y los enviamos a comparación*/
					UpdateArea('new_nomarea='+m_nomarea.val()+'&new_descripcion='+m_descripcion.val()
						+'&new_ubicacion='+m_ubicacion.val()+'&new_estado='+new_estado+
						'&old_nomarea='+datos_temporales.m_nomarea+'&old_descripcion='+datos_temporales.m_descripcion 
						+'&old_ubicacion='+datos_temporales.m_ubicacion+'&old_estado='+datos_temporales.m_estado+
						'&idarea='+datos_temporales.m_idarea
					);
				}
			}
		});

		
   	});
   	</script>
   	<!-- Espacio para el dialogo -->
  	<button id="p_b_lista_area">Cargar Lista de áreas</button>
  	<br>
  	<br>
	
	
	<div id='preguntaEliminar' title=''></div>
	
	
	<div id="dynamic"></div>
	<div id="form-modificar-area" title="Modificar área">
						<p style="text-align:center;font-size:120%" class="tipsModificar">-</p>
						<form>
						<fieldset class="ui-widget-content ui-corner-all">

						<table class="formulario">
						<tr>
						<td>*</td>
						<td class="ui-widget-content ui-corner-all"><label>Nombre de área:</label></td>
						<td title="Mínimo 4 carácteres"><input type="text" name="m_nomarea" id="m_nomarea" value=""  class="text ui-widget-content ui-corner-all"  size="40" /></td>
						</tr>
						<tr>
						<td>*</td>
						<td class="ui-widget-content ui-corner-all"><label>Descripción:</label></td>
						<td title="Descripción acerca del área"><input type="text" name="m_descripcion" id="m_descripcion" value="" class="text ui-widget-content ui-corner-all" size="60"  /></td>
						</tr>
						<tr>
						<td></td>
						<td class="ui-widget-content ui-corner-all"><label >Ubicación:</label></td>
						<td title="Edificio, ubicación  o dirección física del área"><input type="text" name="m_ubicacion" id="m_ubicacion" value="" class="text ui-widget-content ui-corner-all" size="50"/></td>	
						</tr>
						<tr>
						<td></td>
						<td class="ui-widget-content ui-corner-all"><label>Estado:</label></td>
						<td title="habilita/inhabilita el área especifíca" class="ui-widget-content ui-corner-all">
							<input type="radio" class="estados" name="estados_s" id="m_activo" /><label for="m_activo">Activo</label>
							<input type="radio" class="estados" id="m_inactivo"  name="estados_s" /><label for="m_inactivo">Inactivo</label>
						</td>	
						</tr>
						</table>
						</fieldset>
						</form>
			</div>

			<div id="area-div" title="">
   			</div>